<template>
  <div id="home">
    <el-container>
      <!-- 左侧菜单 -->
      <leftmenu></leftmenu>
      <el-container id="rightBox">
        <!-- 顶部 -->
        <righttop></righttop>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>系统信息</span>
            </div>
            <el-alert title="成功提示的文案" type="success" show-icon></el-alert>
            <el-alert title="消息提示的文案" type="info" show-icon></el-alert>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>销售排行</span>
                    </div>
                    <el-table :data="salesData" stripe style="width: 100%">
                      <el-table-column prop="name" label="商品名称"></el-table-column>
                      <el-table-column prop="sales" label="销量"></el-table-column>
                    </el-table>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>缺货的商品</span>
                    </div>
                    <el-table :data="stockoutData" stripe style="width: 100%">
                      <el-table-column prop="name" label="商品名称"></el-table-column>
                      <el-table-column prop="inventory" label="库存"></el-table-column>
                      <el-table-column prop="handle" label="操作"></el-table-column>
                    </el-table>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-main>
        <!-- 底部 -->
        <rightbottom></rightbottom>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//引入LeftMenu.vue
import LeftMenu from "../components/LeftMenu";
//引入RightTop.vue
import RightTop from "../components/RightTop";
//引入RightBottom.vue
import RightBottom from "../components/RightBottom";

export default {
  data() {
    return {
      salesData: [
        {
          name: "海飞丝去屑洗发水",
          sales: 8
        },
        {
          name: "茅台酒",
          sales: 6
        },
        {
          name: "龙凤呈祥",
          sales: 5
        },
        {
          name: "龙凤呈祥2",
          sales: 2
        }
      ],
      stockoutData: [
        {
          name: "我的优乐美",
          inventory: 0,
          handle: "入库"
        }
      ]
    };
  },
  components: {
    //注册组件
    "leftmenu": LeftMenu, //左侧
    "righttop": RightTop, //右上
    "rightbottom": RightBottom //右底
  }
};
</script>
<style>
/* 容器高度 100% */
.el-container {
  height: auto;
  min-height: 100%;
}
.el-header {
  padding-top: 20px !important;
}
.el-header h1 {
  font-size: 26px;
  padding: 0;
}
.el-header a {
  font-size: 14px;
  color: #555555;
  text-decoration: none;
}
.el-header,
.el-footer {
  background-color: #fbfbfb;
  color: #555555;
}
.el-footer {
  font-size:12px;
  line-height:60px;
}

.el-main {
  background-color: #fbfbfb;
  color: #333;
  text-align: center;
}
</style>
